<template>
  <div class="container">
    <!-- 返回顶部按钮 -->
    <el-backtop target=".container" />

    <div class="header">
      <h3 class="title">订单列表</h3>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first" />
        <el-tab-pane label="待确认" name="second" />
        <el-tab-pane label="目前生产中" name="third" />
        <el-tab-pane label="质量检验" name="fourth" />
        <el-tab-pane label="申请结算" name="fifth" />
        <el-tab-pane label="开票" name="sixth" />
        <el-tab-pane label="售后" name="seventh" />
      </el-tabs>
    </div>

    <!-- 订单编号查询 -->
    <div class="search">
      <span>订单编号:</span>
      <el-input v-model="input" style="width: 240px" placeholder="请输入" />
      <el-button color="#2F4050">查询</el-button>
      <el-button color="#2F4050">重置</el-button>
    </div>

    <!-- 订单列表表格 -->
    <div class="table-container">
      <el-table
        ref="tableData"
        :data="allOrders"
        style="width: 100%"
        border
        stripe
      >
        <el-table-column prop="orderId" label="订单编号" width="120px" />
        <el-table-column prop="totalAmount" label="订单总金额" width="120px" />
        <el-table-column prop="createTime" label="创建时间" width="200px" />
        <el-table-column prop="status" label="状态" width="120px" />
        <el-table-column
          prop="complaintStatus"
          label="投诉状态"
          width="120px"
        />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" size="small" @click="viewOrder(scope.row)"
              >确认订单</el-button
            >
            <el-button type="text" size="small" @click="editOrder(scope.row)"
              >驳回</el-button
            >
            <el-button type="text" size="small">下载合同</el-button>
            <el-button type="text" size="small">回传合同</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
import type { TabsPaneContext } from "element-plus";
import { ElTable } from "element-plus";

const input = ref("");
const activeName = ref("first"); // 默认选中 "全部"
const tableRef = ref<InstanceType<typeof ElTable>>();

const allOrders = ref([
  {
    orderId: "1001",
    totalAmount: "¥5000",
    createTime: "2024-03-01 14:22",
    status: "待确认",
    complaintStatus: "无"
  },
  {
    orderId: "1002",
    totalAmount: "¥3200",
    createTime: "2024-03-02 10:15",
    status: "生产中",
    complaintStatus: "无"
  },
  {
    orderId: "1003",
    totalAmount: "¥7500",
    createTime: "2024-03-03 08:45",
    status: "质量检验",
    complaintStatus: "有"
  },
  {
    orderId: "1004",
    totalAmount: "¥4200",
    createTime: "2024-03-04 09:30",
    status: "申请结算",
    complaintStatus: "无"
  },
  {
    orderId: "1005",
    totalAmount: "¥9800",
    createTime: "2024-03-05 15:10",
    status: "开票",
    complaintStatus: "无"
  },
  {
    orderId: "1006",
    totalAmount: "¥6700",
    createTime: "2024-03-06 11:45",
    status: "售后",
    complaintStatus: "有"
  }
]);

// 当前展示的订单数据
const tableData = ref([...allOrders.value]);

// 订单状态映射
const statusMap: Record<string, string | null> = {
  first: null, // 全部订单
  second: "待确认",
  third: "生产中",
  fourth: "质量检验",
  fifth: "申请结算",
  sixth: "开票",
  seventh: "售后"
};

// 处理标签切换
const handleClick = (tab: TabsPaneContext) => {
  console.log("切换到标签:", tab.paneName);

  const selectedStatus = statusMap[tab.paneName as string]; // 获取选中的订单状态
  console.log("选中的订单状态>>>", selectedStatus);
  if (selectedStatus) {
    tableData.value = allOrders.value.filter(
      order => order.status === selectedStatus
    );
  } else {
    tableData.value = [...allOrders.value]; // 显示所有订单
  }
};

// 查看订单
const viewOrder = (row: any) => {
  console.log("查看订单:", row);
};

// 编辑订单
const editOrder = (row: any) => {
  console.log("编辑订单:", row);
};

// 解决表格渲染问题
onMounted(() => {
  nextTick(() => {
    if (tableRef.value) {
      tableRef.value.doLayout();
    }
  });
});
</script>

<style scoped>
.container {
  padding: 10px;
  width: 1050px;
  overflow-y: auto;
  max-height: 90vh;
}

.header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.search {
  margin-top: 20px;
  height: 78px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  background-color: #fff;
  border: 1px solid #bbb;
}

.search .el-button {
  margin-left: 20px;
}

/* 订单表格样式 */
.table-container {
  margin-top: 15px;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
}

/* 修改表头背景颜色 */
:deep(.el-table__header th) {
  background-color: #dbdddf !important;
}

/* 优化标签页样式 */
.demo-tabs {
  :deep(.el-tabs__header) {
    margin: 0;
  }
  :deep(.el-tabs__nav-wrap::after) {
    height: 2px;
  }
}
</style>
